<template>
  <div class="plant_box">
    <div class="header_sele" style="left: 10%">
      <div class="add_qy">
        <a-button type="primary" v-if="path=='plant'" @click="addqyzs">添加生产厂推荐</a-button>
        <a-button type="primary" v-if="path=='special'" @click="addqyzs">添加特别推荐</a-button>
        <a-button type="primary" v-if="path=='import'" @click="addqyzs">添加进口推荐</a-button>
        <a-button type="primary" v-if="path=='newest'" @click="addqyzs">新增推荐</a-button>
        <a-popconfirm title="确定删除吗?" @confirm="start">
          <a-button type="primary">批量删除</a-button>
        </a-popconfirm>
      </div>
      <div>
        <a-input placeholder="请输入关键字" style="width:300px;" @change="gjzSearch" v-model="fields" />
      </div>
    </div>
    <!-- 表格-================= -->
    <div class="bcg">
      <div class="glwz">
        <div class="tabs">
          <a-tabs :default-active-key="tabskey" @change="callback">
            <a-tab-pane :key="1" tab="生产厂推荐"></a-tab-pane>
            <a-tab-pane :key="2" tab="特别推荐"></a-tab-pane>
            <a-tab-pane :key="3" tab="进口推荐"></a-tab-pane>
            <a-tab-pane :key="4" tab="新增推荐"></a-tab-pane>
          </a-tabs>
        </div>
        <a-spin tip="加载中....." :spinning='tjflag'>
      <!-- <div class="spin-content">
        我的描述文案是自定义的。。。
      </div> -->
        <a-table
          @change="getsuggestList"
          :loading="loading"
          :columns="columns"
          :pagination="pagination"
          :dataSource="zsdata"
          :rowSelection="rowSelection"
        >
          <template slot="LicenseAdd" slot-scope="text, record, index">
            <div class="fzdate">
              <img :src="text" alt />
            </div>
          </template>
          <template slot="operation" slot-scope="text, record, index">
            <div class="editable-row-operations">
              <a class="del" @click="edit(record)">修改</a>
              <a-popconfirm
                title="确定删除吗?"
                class="del"
                @confirm="() =>tjdelete(record,record.key)"
              >删除</a-popconfirm>
            </div>
          </template>
        </a-table>
    </a-spin>

      </div>
    </div>
    <div class="qyzs_box" v-if="addscctjflag">
      <addscctj></addscctj>
    </div>
  </div>
</template>

<script>
import headerComm from "../header-comm/header.vue";
import addscctj from "./addscctj.vue";
import qs from "qs";
const columns = [
  {
    title: "单位名称",
    dataIndex: "GSMC"
  },
  {
    title: "推荐值",
    dataIndex: "value"
  },
  {
    title: "截止日期",
    dataIndex: "expire"
  },
  {
    title: "操作",
    dataIndex: "operation",
    fixed: "right",
    width: 250,
    scopedSlots: { customRender: "operation" }
  }
];
export default {
  data() {
    return {
      columns,
      zsdata: [],
      loading: false,
      pagination: {
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        total: 0,
        current: 1
      },
      addscctjflag: false,
      fields: "",
      selectedRowKeys: [],
      path: "",
      editval: "",
      tabskey:1,
      tjflag:true
    };
  },

  methods: {
    callback(key) {
      console.log(key);
      if (key == "1") {
        this.$router.push("/plant")
      } else if (key == "2") {
        this.$router.push("/special")

      } else if (key == "3") {
        this.$router.push("/imports")

      } else {
        this.$router.push("/newest")

      }
    },
    getsuggestList(pagination) {
      console.log(pagination);
      this.pagination.current = pagination.current;
      this.axios
        .post(
          "suggest/suggestList.php",
          qs.stringify({
            page: this.pagination.current,
            pageSize: pagination.defaultPageSize,
            // fields: this.fields,
            keywords: this.fields,
            // condition: "",
            type: this.path
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.tjflag=false
            this.zsdata = res.data.result.data;
            for (var i = 0; i < this.zsdata.length; i++) {
              this.zsdata[i].key = i;
            }
            this.pagination.total = Number(res.data.result.total);
          } else {
            this.zsdata = [];
            this.tjflag=false

          }
        });
    },
    addqyzs() {
      this.addscctjflag = true;
    },
    tjdelete(value, key) {
      this.axios
        .post(
          "suggest/suggestDelete.php",
          qs.stringify({
            id: value.id
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            //删除成功,总条数减1
            this.pagination.total = this.pagination.total - 1;
            const dataSource = [...this.zsdata];
            this.zsdata = dataSource.filter(item => item.key !== key);
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    //选择删除
    start() {
      const newData = [...this.zsdata];
      let selectedRowKeys = this.selectedRowKeys;

      if (selectedRowKeys.length != "") {
        this.loading = true;
        this.axios
          .post(
            "suggest/suggestBatchDelete.php",
            qs.stringify({
              id: selectedRowKeys
            })
          )
          .then(res => {
            //更新数据成功
            if (res.data.code == 303) {
              this.loading = false;
              this.selectedRowKeys = "";
              this.$notification["success"]({
                message: "成功",
                description: res.data.msg,
                duration: 1.5
              });
              selectedRowKeys.map(rowkeys => {
                this.zsdata = this.zsdata.filter(item => item.key !== rowkeys);
              });
              this.getsuggestList(this.pagination);
            } else {
              this.loading = false;
              this.$notification["error"]({
                message: "失败",
                description: res.data.msg,
                duration: 1.5
              });
            }
          });
      } else {
        this.loading = false;
        this.$notification["error"]({
          message: "失败",
          description: "请先选择要删除的数据",
          duration: 1.5
        });
      }
    },
    edit(val) {
      console.log(val);
      this.addscctjflag = true;
      this.editval = val;
    },
    gjzSearch() {
      this.pagination.current = 1;
      this.getsuggestList(this.pagination);
    }
  },
  computed: {
    rowSelection() {
      const { selectedRowKeys } = this;
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = [];
          for (var i = 0; i < selectedRows.length; i++) {
            // if (selectedRowKeys[i] == i) {
            this.selectedRowKeys.push(selectedRows[i].id);
            // }
          }
          console.log(this.selectedRowKeys);
        }
      };
    }
  },
  components: {
    headerComm,
    addscctj
  },
  created() {
    if (this.$route.path == "/plant") {
      this.path = "plant";
      this.tabskey=1
    } else if (this.$route.path == "/special") {
      this.path = "special";
      this.tabskey=2
    } else if (this.$route.path == "/imports") {
      this.path = "import";
      this.tabskey=3
    } else {
      this.path = "newest";
      this.tabskey=4
    }
    this.getsuggestList(this.pagination);

    // console.log(this.$route.path)
  }
};
</script>

<style lang='less'>
.plant_box{
  .header_sele{
    position: absolute;
    .add_qy{
      button{
        margin: 0 10px;
      }
    }
  }
.qyzs_box {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  width: 100%;
  height: 1000px;
}
.fzdate {
  img {
    height: 50px;
  }
}
.gllb_box .glwz {
  width: 98%;
  position: relative;
  top: 147px;
  left: 1%;
  background-color: #fff;
  border: 1px solid #ccc;
}
.tabs {
  text-align: left;
}
}

</style>

